//     我的检验
import { SearchOutlined, RedoOutlined } from '@ant-design/icons';
import { Button, Form, Input, Table, Pagination, Space, Modal } from 'antd';
import type { ColumnsType } from 'antd/lib/table';
import axios from 'axios';
import { useEffect, useState, FC, ReactNode } from 'react';
import { useNavigate } from 'react-router-dom';
import { getMaterialMaterial } from '../../../utils/zhy';
import './index.css'
interface DataType {
  mtId: number;//序号
  mtTestState: number;//状态
  materialsCode: string;//物料编码
  materialsName: string;//物料名称
  materialsStyle: string;//规格型号
  supId: number;//供方代号
  supAbbreviations: string;//供方简称
  mtNumber: string;//批次
  mtCount: number;//数量
  userName: string;//检验员
  mtUrgent: number;//加急
  mtReceNum: string;//收货单号
  mtUseTime: string;//预计使用时间
  mtDistributeLeafletsState: string;//状态
  mtLocation: string;//收货库位
  mtReasonForRejection: string;//驳回原因
}
const MaterialMaterial: FC = () => {
  const [data, setData] = useState<DataType[]>()
  // 获取数据
  useEffect(() => {
    getMaterialMaterial().then((res) => {
      console.log(res.data.data);
      if (res.data.code == 200) {
        console.log("成功请求数据！");
        setData(res.data.data.listSupplier)
        console.log(res.data.data.listSupplier);
      } else {
        console.log("请求数据失败！");
      }
    }).catch((error) => {
      console.log(error);
    })
  }, [])
  // 对话弹框
  const [isModalVisible, setIsModalVisible] = useState(false);

  const handleOk = () => {
    setIsModalVisible(false);
  };
  const handleCancel = () => {
    setIsModalVisible(false);
  };
  // 查询
  const [materialsCode1, setSearchid] = useState<string>()
  const [supId1, setSearchgroup] = useState<string>()
  const onsearchid = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setSearchid(e.target.value)
  };
  const onsearchid1 = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setSearchgroup(e.target.value)
  };
  const selectname = () => {
    console.log(setSearchid, setSearchgroup);
    axios({
      url: `/api3/material/selectMyTest`,
      params: { materialsCode: materialsCode1, supId: supId1 }
    }).then(res => {
      setData(res.data.data.listSupplier)
    }).catch(error => console.log(error)
    )
  }
  // 重置
  const resetit = () => {
    setSearchid('')
    setSearchgroup('')
    getMaterialMaterial().then(res => {
      setData(res.data.data.listSupplier)
      console.log(res.data.data.listSupplier);

    }).catch(error => console.log(error)
    )
  }
  // --------------------
  const [form] = Form.useForm();
  //table的相关数据，函数
  const columns: ColumnsType<DataType> = [
    {
      title: '序号',
      dataIndex: 'mtId',
      align: 'center',
      fixed: 'left',
      width: 100,

    },
    {
      title: '操作',
      align: 'center',
      fixed: 'left',
      dataIndex: 'address',
      render: (_, record) => (
        <Space size="middle">
          <span onClick={tiaoz}>维护</span>
        </Space>
      )
    },
    {
      title: '状态',
      dataIndex: 'mtTestState',
      align: 'center',
      render: (_, record) => (
        <Space size="middle">
          <p>{record.mtTestState == 0 ? '待采样' : '检验中'}</p>
        </Space>
      )
    },
    {
      title: '物料编码',
      dataIndex: 'materialsCode',
      align: 'center',
    },
    {
      title: '物料名称',
      dataIndex: 'materialsName',
      align: 'center',

    },
    {
      title: '规格型号',
      dataIndex: 'materialsStyle',
      align: 'center',

    },
    {
      title: '供方代号',
      dataIndex: 'supId',
      align: 'center',

    },
    {
      title: '供方简称',
      dataIndex: 'supAbbreviations',
      align: 'center',

    },
    {
      title: '批次',
      dataIndex: 'mtNumber',
      align: 'center',
    },
    {
      title: '数量',
      dataIndex: 'mtCount',
      align: 'center',
    },
    {
      title: '检验员',
      dataIndex: 'userName',
      align: 'center',
    },
    {
      title: '加急',
      dataIndex: 'mtUrgent',
      align: 'center',
      render: (_, record) => (
        <Space size="middle">
          <p>{record.mtUrgent == 0 ? '是' : '否'}</p>
        </Space>
      )
    },
    {
      title: '收货单号',
      dataIndex: 'mtReceNum',
      align: 'center',
    },
    {
      title: '预计使用时间',
      dataIndex: 'mtUseTime',
      align: 'center',
      width: 250

    },
    {
      title: '状态',
      dataIndex: 'mtDistributeLeafletsState',
      align: 'center',
      render: (_, record) => (
        <Space size="middle">
          <p>{record.mtUrgent == 0 ? '已派单' : '未派单'}</p>
        </Space>
      )
    },
    {
      title: '收货库位',
      dataIndex: 'mtLocation',
      align: 'center',
    },
    {
      title: '驳回原因',
      dataIndex: 'mtReasonForRejection',
      align: 'center',
    },
  ];

  // 跳转
  const navigate = useNavigate()
  const tiaoz = () => {
    navigate('/home/maintain/:id')
  }
  // 抽样
  const showModal = () => {
    setIsModalVisible(true);
  };

  const { TextArea } = Input
  return (<div >
    <Form form={form} layout="inline" className='btnStyel'>
      <Form.Item >物料编号:<Input className='inp' placeholder="物料组编号" value={materialsCode1} allowClear onChange={onsearchid} /></Form.Item>
      <Form.Item >供货编码:<Input className='inp' placeholder="供货编码" value={supId1} allowClear onChange={onsearchid1} /></Form.Item>
      <Form.Item><Button icon={<SearchOutlined />} style={{ borderColor: 'rgb(2,167,240)', color: 'rgb(2,167,240)' }} onClick={selectname}>查询</Button></Form.Item>
      <Form.Item><Button icon={<RedoOutlined />} style={{ borderColor: 'rgb(245,154,35)', color: 'rgb(245,154,35)' }} onClick={resetit}>重置</Button></Form.Item>
    </Form>
    {/* // 表格 */}
    <Table pagination={{ showQuickJumper: true, defaultPageSize: 3, showTotal: (total, range) => `共 ${total} 条`, position: ["bottomCenter"] }} scroll={{ x: 2500 }} columns={columns} dataSource={data} rowKey={(record) => { return record.mtId }} />
    {/* ------------------------------------------ */}

    <Modal title="确定抽样" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
      <Form>
        <Form.Item label="需抽样数量" name={''} rules={[{ required: true, message: '请输入!' }]}>
          <Input />
        </Form.Item>
      </Form>
    </Modal>
  </div>);
};
export default MaterialMaterial
